<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hahaah</h1>
</body>
</html>

<!-- 注：html 的 script 下想用 ESM ，必须 <script type="module"> -->
<script type="module">
// 英文：
  // import -> 导入/输入/进口
  // export -> 出口/导出
  // duplicate -> 重复
// import { add, myWifeBirthday as songWife } from './utils.js';

// import * as utils from './utils.js';
import _ from './utils.js';

// 导入 add 函数

// console.log(utils.add(1, 2), utils.sum(1, 2, 3));

// console.log(myWifeBirthday);


// ESM 的模块化 方案：
  // 1. 必须的 server 环境下，才能用 ESM（即必须用 http 协议 访问 html 文件才能）
    // VScode 插件安装 Live Server
      // 安装成功后，VSCode 最下侧 有 “Go Live” 按钮，点击它
        // 注：Live Server 提供了 代码变动，自动刷新页面的功能；  -> 行话：热加载
  // 2. 模块化，实现，均有 导入 、 导入 两个 “功能”。


/* ESM 技术细节：
1. 导出：
  1）export { 变量1, 变量2 } 
  2) export 声明语句eg: const xx = ； 其本质为 export { xx } 的简写
    注： 1） 和 2) 的 导出形式，二者只能用其一； 否则会 duplicate 报错
  3）导出 “默认” 数据：即表达式返回值的数据为 默认数据
    export default 表达式

2. 导入：  注：import 必须在 文件头部
  1) import { 变量名 } from 'filePath';
  2) 给 export 的变量导入时 改值：
    import { 变量名 as 新变量名} from 'filePath';
  3) 需求：将 utils 文件中所有 export 的函数都 导入进来
    import * as utils from './utils.js';

  4) 导入 “默认” 数据：
    import 任意变量名 from 'filePath';
      注：任意变量名 被赋值为 export default 的数据
    
*/
</script>